<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位机制-浮动</title>
  <style>


       .container{
            width: 500px;
             height: 150px;
             padding: 10px;
            border: 1px solid;

       }

       .left {
            float: left;
       }

       .right{
            float: right;
       }

      .box{
           width: 150px;
           height: 150px;
           border: 1px solid;
           margin-left: 10px;

      }


  </style>
</head>
<body>


<div class="container left">
    <div class="right">
        <div class="box left">
            box-1
        </div>
        <div class="box left">
            box-2
        </div>
    </div>
    <div class="box left">
        box-3
    </div>
</div>



</body>
</html>